<template>
  <div class="container">
    <div class="maintain">
      <img src='../../assets/img/belong-man-1.jpg' />
      <div class="info">
        <div class="name">上装</div>
        <div class="dis">全场低至3折，保暖运动专场</div>
      </div>
    </div>
    <div class="products">
      <div class="tabs">
        <div class="item" @click="listByPrice">价格</div>
        <div class="item" @click="listBySold">销量</div>
        <div class="item item-cur" @click="goToFilter">筛选</div>
      </div>
      <div class="filter">
        <div class="item">
          <div class="sort">场景</div>
          <div class="labels">
            <div class="item">瑜伽</div>
            <div class="item">训练</div>
            <div class="item">跑步</div>
            <div class="item">休闲</div>
          </div>
        </div>
        <div class="item">
          <div class="sort">尺码</div>
          <div class="labels">
            <div class="item">XXXS</div>
            <div class="item">XS</div>
            <div class="item">L</div>
            <div class="item">M</div>
            <div class="item">XL</div>
          </div>
        </div>
        <div class="item">
          <div class="sort">优惠</div>
          <div class="labels">
            <div class="item">促销</div>
          </div>
        </div>
      </div>
      <div class="btns">
        <div class="btn">重置</div>
        <div class="btn btn-bg">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goToFilter(){
      this.$router.push('/productFilter')
    },
    listByPrice(){
      this.$router.push('/productList')
    },
    listBySold(){
      this.$router.push('/productList')
    },
  },
}
</script>

<style scoped>
.container{
  background-color: #ffffff;
}
.maintain{
  position: relative;
}
.maintain img{
  width: 100%;
}
.maintain .info{
  position: absolute;
  left: 30px;
  bottom: 60px;
  color: #ffffff;
}
.maintain .info .name{
  font-size: 16px;
  line-height: 2.5;
}
.maintain .info .dis{
  font-size: 12px;
}
.products{
  position: relative;
  margin-top: -15px;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  background-color: #ffffff;
  z-index: 2;
}
.products .tabs{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 2.5;
}
.products .tabs .item-cur{
  color: #d50721;
}
.products .tabs .item:first-child{
  padding-left: 20px;
}
.products .tabs .item:last-child{
  padding-right: 20px;
}
.products .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.products .list .item{
  padding-right: 5px;
  width: 50%;
  box-sizing: border-box;
}
.products .list .item:nth-child(2n){
  padding-right: 0;
  padding-left: 5px;
}
.products .list .item img{
  width: 100%;
  border-radius: 6px;
}
.products .list .item .name{
  font-size: 14px;
  padding: 14px 10px 3px 10px;
}
.products .list .item .dis{
  font-size: 14px;
  color: #8c8c8c;
  padding: 0 10px 5px 10px;
}
.products .list .item .price{
  display: flex;
  align-items: flex-end;
  padding: 3px 10px 20px 10px;
}
.products .list .item .price h3{
  color: #d50721;
  padding-right: 15px;
}
.products .list .item .price h3 span{
  font-size: 18px;
  padding: 3px;
}
.products .list .item .price h4{
  color: #8c8c8c;
  text-decoration: line-through;
}
.filter{
  border-top: 1px solid #f6f6f6;
  padding: 10px 20px 80px 20px;
}
.filter .item .sort{
  line-height: 3;
  font-size: 14px;
}
.filter .item .labels{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.filter .item .labels .item{
  width: 32%;
  margin-right: 2%;
  line-height: 30px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  text-align: center;
  font-size: 14px;
  box-sizing: border-box;
}
.filter .item .labels .item:nth-child(3n){
  margin-right: 0;
}
.btns{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 5px 20px 5px;
  background-image: linear-gradient(rgba(255, 255, 255, .6), #ffffff, #ffffff);
}
</style>